<template>
  <div class="Qcgl_xg">
    <!-- 第一行 -->
    <el-row>
      <el-col>
        <div class="header_title">修改器材管理信息</div>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <div class="content_add">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="editData"
      >
        <el-form-item label="器材编号">
          <el-input
            v-model="editData.number"
            placeholder="请输入器材编号"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select
            v-model="editData.wfacilityClass2.id"
            clearable
            placeholder="请输入类别"
            style="width: 400px"
          >
            <el-option
              v-for="(v, i) in equipment_typeData"
              :key="i"
              :label="v.name"
              :value="v.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="器材名称">
          <el-input
            v-model="editData.name"
            placeholder="请输入器材名称"
          ></el-input>
        </el-form-item>

        <el-form-item label="单位">
          <el-select
            v-model="editData.facilityUnit.id"
            placeholder="请输入单位"
            clearable
            style="width: 400px"
          >
            <el-option
              v-for="(v, i) in company_dcompanyData"
              :key="i"
              :label="v.unit"
              :value="v.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="器材型号">
          <el-input
            v-model="editData.model"
            placeholder="请输入器材型号"
          ></el-input>
        </el-form-item>
        <el-form-item label="存放区域">
          <el-select
            v-model="editData.location.region.id"
            clearable
            placeholder="请选择存放区域"
            style="width: 400px"
            @change="getAreaIdData"
          >
            <el-option
              v-for="(v, i) in storage_areaData"
              :key="i"
              :label="v.name"
              :value="v.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="货架编号" v-show="isShowChange">
          <el-select
            v-model="editData.location.id"
            clearable
            placeholder="请输入货架编号"
            style="width: 400px"
          >
            <el-option
              v-for="(v, i) in goods_idData"
              :key="i"
              :label="v.name"
              :value="v.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="editBtnGroup">
          <el-button class="cancelBtn" @click="cancelInfo">取消</el-button>
          <el-button type="primary" @click="editInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      labelPosition: "left",
      isShowChange: false,
      editData: {
        model: "",
        name: "",
        number: "",
        // 分类
        wfacilityClass2: {
          id: "",
          name: "",
        },
        // 单位
        facilityUnit: {
          id: "",
          unit: "",
        },
        // 存放区域
        location: {
          // 货架编号
          id: "",
          name: "",
          // 存放区域
          region: {
            id: "",
            name: "",
          },
        },
      },
      // 器材分类
      equipment_typeData: [],
      // 区域
      storage_areaData: [],
      // 单位
      company_dcompanyData: [],
      // 货架编号
      goods_idData: [],
    };
  },
  methods: {
    // 获取修改的数据
    getQcglEditData: function () {
      let getEditData = sessionStorage.getItem("qcglInfo");
      this.editData = JSON.parse(getEditData);
      // console.log(this.editData);
    },
    // 修改
    editInfo: function () {
      this.$axios({
        url: "/wEquipManage/update",
        method: "post",
        data: {
          // 分类id
          classId: this.editData.wfacilityClass2.id,
          // 货架编号
          locationId: this.editData.location.id,
          model: this.editData.model,
          // 器材名称
          name: this.editData.name,
          number: this.editData.number,
          // 单位
          unitId: this.editData.facilityUnit.id,
        },
      }).then((res) => {
        // console.log("修改的数据：", res);
        if (res.data.code == 0) {
          this.$message.success("数据修改成功");
          this.$router.push("/home/Qcgl");
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    // 取消
    cancelInfo: function () {
      this.$router.push("/home/Qcgl");
      this.$message.info("取消修改");
    },

    // 器材分类下拉
    equipment_type: function () {
      this.$axios({
        url: "/wFacilityClass2/list",
        method: "get",
      }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 0) {
          this.equipment_typeData = res.data.data;
        } else {
          this.$message.error("器材分类下拉框数据加载失败！");
        }
      });
    },
    // 存放区域列表
    storage_area: function () {
      this.$axios({
        url: "/wRegion/list",
        method: "get",
      }).then((res) => {
        if (res.data.code == 0) {
          this.storage_areaData = res.data.data;
          this.goods_id;
        } else {
          this.$message.error("存放区域下拉框数据加载失败！");
        }
      });
    },
    // 存放区域的change事件
    getAreaIdData: function (areaId) {
      // console.log("存放区域id",areaId)
      this.isShowChange = "true";
      this.editData.location.name = "";
      this.goods_id(areaId);
    },
    // 货架编号列表
    goods_id: function (areaId) {
      this.$axios({
        url: "/queryWlocation/list",
        method: "get",
        params: {
          wRegionId: areaId,
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.goods_idData = res.data.data;
        } else {
          this.$message.error("单位下拉框数据加载失败！");
        }
      });
    },
    // 单位下拉
    company_dcompany: function () {
      this.$axios({
        url: "/wFacilityUnit/list",
        method: "get",
      }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 0) {
          this.company_dcompanyData = res.data.data;
        } else {
          this.$message.error("单位下拉框数据加载失败！");
        }
      });
    },
  },
  mounted: function () {
    this.getQcglEditData();
    // 存放区域下拉
    this.storage_area();
    // 器材分类
    this.equipment_type();
    // 单位下拉
    this.company_dcompany();
    // 货架编号
    this.goods_id();
  },
};
</script>

<style lang="less" scoped>
.Qcgl_xg {
  width: 100%;
  height: 100%;
  //   background: aquamarine;
  .el-col {
    margin-top: 20px;
    padding-left: 30px;
    min-width: 1440px;
  }
  .header_title {
    height: 40px;
    width: 100%;
    font-size: 24px;
    line-height: 40px;
    color: #344563;
    font-weight: bolder;
  }
  .el-form {
    height: 360px;
    width: 1300px;
    font-size: 20px;
    margin-top: 40px;
    margin-left: 40px;
    position: relative;

    // background: yellow;

    .el-form-item {
      width: 580px;
      float: left;
      padding: 20px 20px 20px 0px;
      margin: 0;
    }
    .label {
      color: red;
    }
    .el-input {
      width: 400px;
      height: 40px;
      line-height: 40px;
      // border: 1px solid red;
    }
    .el-input__inner {
      width: 190px;
    }

    .editBtnGroup {
      text-align: center;
      position: absolute;
      bottom: -260px;
      left: 280px;

      .el-button {
        background-color: #6554c0;
        color: #fff;
        width: 150px;
        height: 50px;
        font-size: 20px;
        margin-right: 50px;
      }
      .cancelBtn {
        background-color: #fff;
        color: #7161c5;
        border: 1px solid #6a5ac2;
      }
    }
  }
}
</style>